<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*样式初始化，把标签天生带的样式除去*/
      *{
          margin:0;
          padding: 0;
      }
      ul{
          list-style: none;
      }
      a{
          text-decoration: none;
      }
      /*swiper*/
      .swiper{
          /*子绝父相*/
          position: relative;
          width:1226px;
          height:460px;

          /*水平居中*/
          margin:100px auto;

          /*溢出隐藏*/
          overflow: hidden;

      }

      .swiper .wrapper{
          /*绝对定位*/
          position: absolute;
          left:-1226px;

          /*不设置的话就是默认为父容器的宽度1226，图片放不下，就会自动换行*/
          width:3678px;/*1226*3(放三个图片（li里面）)，显然他超出了其父元素宽度1226，使用overflow：hidden对溢出长度隐藏*/

      }

      .swiper .wrapper li{
          width:1226px;/*填满整个swiper，但只有wrapper的1/3*/
          float:left
      }
      /*设置图片的大小*/
      .swiper .wrapper img{
          width:100%;/*这个100%是相对于父元素li,尽量不要设置具体数值，高度让其自适应*/
      }

      /*上下一张相同点*/
      .btn{
          /*子绝父像*/
          position: absolute;
          /*a标签是行内标签，不能直接设置大小，但是使用绝对定位后就可以了*/
          width:41px;/*取决于图片宽高，图片宽高用PXcook量出来的*/
          height: 69px;

          /*一个背景图片顶四个*/
          background-image: url("/static/images/youku/icon-slides.png");
          /*设置背景图片显示的位置*/
          background-position: -83px;/*那个图片的第三部分,从白色图片移至灰色图片*/

          /*垂直居中*/
          top:50%;
          margin-top:-34.5px;/*69/2*/
      }
      /*上一张*/
      .pre{
          /*设置背景图片的显示位置*/
          background-position: -83px;

      }
      /*下一张*/
      .next{
          background-position: -123px;/*那个图片的第四部分*/
          right:0;
      }
      .pre:hover{
          background-position: 0;
      }
      .next:hover{
          background-position: -41px;
      }
      /*小圆点*/
      /*先将容器定位到期望位置*/
      .page{

          width:100px;
          height:10px;
          /*background-color: #ffdd9a;*/


         /* line-height: 10px;*/
          /*水平居中*/
          position: absolute;
          left:50%;
          bottom: 0;
          margin-left:-50px;
          /*距离底部*/
          margin-bottom: 20px;

          text-align: center;
      }
      .page a{
          /*使其可以设置宽高*/
          display: inline-block;
          width:6px;/*10-2*2*/
          height:6px;
          background-color: rgba(0,0,0,0.3);
          /*设置圆角*/
          border-radius: 5px;/*宽高的一半，正好是个圆*/
          border:2px solid black;
      }

      /*小圆点的激活样式*/
      .page .active{
          background-color: rgba(255,255,255,0.5);
          border-color: #494c50;
      }



  </style>
</head>
<body>
<!--轮播图结构-->
<div class="swiper">
    <!--u列表-->
  <ul class="wrapper">
    <li><a href="#"><img src="/static/images/youku/lunbo1.png"></a></li>
      <li><a href="#"><img src="/static/images/youku/lunbo2.png"></a></li>
      <li><a href="#"><img src="/static/images/youku/lunbo3.png"></a></li>
  </ul>
    <!--上一张，下一张-->
    <a href="#" class="btn pre"></a>
    <a href="#" class="btn next"></a>
    <!--小圆点-->
    <div class="page">
        <a hreef="#" class="active"></a>
        <a hreef="#"></a>
        <a hreef="#"></a>
    </div>
</div>
</body>
</html>